<template>
	<view class="swiper-container" :id="id">
		<view
			class="swiper-box"
			:class="{ animation: !allow }"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			:style="{
				transform: `translateX(${position}rpx)`
			}"
		>
			<view class="swiper-item" v-for="(item, index) in list" :key="index">
				<view :style="{ width: baseWidth + 'rpx' }" @click.native="handlerClick(item, index)">
					<image class="swiper-item-image" :src="item[fields.imageUrlField]" mode="aspectFill" :style="{ height: imageHeight + 'rpx' }" />
					<view class="swiper-item-content">
						<view class="swiper-item-content_title">{{ item[fields.titleField] }}</view>
						<view v-if="item[fields.subTitleField]" class="swiper-item-content_sub-title">{{ item[fields.subTitleField] }}</view>
						<view class="swiper-item-content_sub-title">{{ item[fields.dateTimeField] }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		baseWidth: {
			type: Number,
			default: 256
		},
		imageHeight: {
			type: Number,
			default: 208
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		left: { type: Number, default: 40 },
		right: { type: Number, default: 40 }
	},
	watch: {
		// list: {
		// 	handler(val) {
		// 		this.calcMaxWidth();
		// 	},
		// 	deep: true
		// },
		keys: {
			handler(val) {
				Object.assign(this.fields, val);
			},
			immediate: true
		},
		left: {
			handler(val) {
				this.position = val;
			},
			immediate: true
		}
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			id: 'swiper_' + this.getUUID(8),
			width: 0,
			maxWidth: 0,
			ratio: 750 / info.windowWidth,
			fields: { imageUrlField: '', titleField: '', subTitleField: '', dateTimeField: '' },
			allow: false,
			position: 0
		};
	},
	mounted() {
		const info = uni.getSystemInfoSync();
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#' + this.id)
			.boundingClientRect(data => {
				this.width = data.width * this.ratio;
			})
			.exec();
	},
	methods: {
		getUUID(len, radix) {
			var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			var uuid = [],
				i;
			radix = radix || chars.length;
			if (len) {
				for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
			} else {
				var r;
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
				for (i = 0; i < 36; i++) {
					if (!uuid[i]) {
						r = 0 | (Math.random() * 16);
						uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
					}
				}
			}
			return uuid.join('');
		},
		handlerClick(item, index) {
			this.$emit('itemClick', item, index);
		},
		calcMaxWidth() {
			const len = this.list.length;
			return len * this.baseWidth + (len - 1) * 24;
		},
		touchStart(e) {
			if(this.list.length != 1) {
				this.allow = true;
				this.start = e.touches[0].pageX * this.ratio;
				this.end = this.start;
				this.last = this.position;
			}
		},
		touchMove(e) {
			if(this.list.length != 1) {
				if (this.allow) {
					this.end = e.touches[0].pageX * this.ratio;
					this.position = this.last + this.end - this.start;
				}
			}
		},
		touchEnd(e) {
			if(this.list.length != 1) {
				const maxWidth = this.calcMaxWidth();
				const moveLest = (this.end - this.start) % this.baseWidth;
				const ratio = this.baseWidth / 2 / moveLest;

				if (0 > ratio && ratio > -1) {
					this.position -= this.baseWidth + moveLest;
					if(Math.abs(this.position) < 2 * this.baseWidth) {
						this.position -= this.left;
					}
				} else if (ratio < -1) {
					this.position -= moveLest;
				} else if (ratio > 0 && ratio < 1) {
					this.position += this.baseWidth - moveLest;
				} else {
					this.position -= moveLest;
				}

				if (this.position > this.left  || this.position === 0) {
					this.position = this.left;
				} else if (this.position <= this.width - maxWidth - this.right) {
					this.position = this.width - maxWidth - this.right;
				}
				this.start = 0;
				this.end = 0;
				this.allow = false;
			}
		}
	}
};
</script>
<style scoped lang="less">
.swiper-container {
	width: 750rpx;
	overflow: hidden;
	.swiper-box {
		position: relative;
		display: flex;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		&.animation {
			transition: all 0.2s;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-right: 24rpx;
			flex-shrink: 0;
			background: #fff;
			box-shadow: 0 2rpx 20rpx 0 rgba(102, 100, 93, 0.1);
			margin-bottom: 32rpx;
			border-radius: 12rpx;
			.swiper-item-image {
				width: 100%;
				height: 176rpx;
				border-radius: 12rpx 12rpx 0 0;
				animation: to-big 0.5s;
				vertical-align: top;
			}

			.swiper-item-content {
				padding: 24rpx;
				text-align: left;
				width: 100%;
				.swiper-item-content_title {
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(102, 100, 93, 1);
					line-height: 36rpx;
					height: 72rpx;
					margin-bottom: 38rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.swiper-item-content_sub-title {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(138, 140, 141, 0.5);
					line-height: 33rpx;
				}
			}
		}
	}
}
</style>
